<template>
<!--项目节点-->
  <div class="container">
      <el-card shadow="never">
          <div>
              <div class="head-box">
                  <span class="title">阶段名称:</span>
              </div>
              <el-tree
                      class="m-t10"
                      :data="dataSource"
                      :props="defaultProps"
                      node-key="id"
                      default-expand-all
                      :expand-on-click-node="false"
              >
                  <template #default="{ node, data }">
            <span class="custom-tree-node">
               <span :class="[node.level==1?'node-title':'node-sub-title']">{{node.label}}</span>
            </span>
                  </template>
              </el-tree>
          </div>
      </el-card>

      <div class="m-t20">
          <common-title title-name="阶段任务"/>
          <public-table
                  ref="publicTableRef"
                  index
                  :selection="false"
                  :indexWidth="'100'"
                  :header-cell-style="{'background':'#f7f7fa'}"
                  border
                  :page="page"
                  :tableData="tableData"
                  :tableOption.sync="tableOption"
                  @page-change="onPageChange"
          >
              <template #buttons="scope">

              </template>
          </public-table>
      </div>
      <div class="button-wrap d-flex a-center j-center m-t20">
          <el-button class="button_cancel" @click="goBack">返回</el-button>
      </div>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import {ElTree} from "element-plus";
import {useRouter} from "vue-router";
import {investmentProjects, reserveInvestmentProjectLibraryApi} from "@/api/investment";
import CommonTitle from "@/components/CommonTitle.vue";
import PublicTable from "@/components/PublicTable.vue";
import {tableCommonFun} from "@/hooks/tableCommon";

const router = useRouter();
const getProjectId  = router.currentRoute.value.params.projectId;
const getProjectTypeId  = router.currentRoute.value.params.projectTypeId;

const  dataSource = ref([]);
const interfaceConfig = reactive({
    fileName:'investment',
    apiPath:'investmentProjects.getProjectTaskList',
});

const defaultParameters = {
    projectId: getProjectId
};

const {
    form,
    page,
    tableOption,
    tableData,
    onQuery,
    onReset,
    onPageChange,
    onExport,
    getData
}  = tableCommonFun(interfaceConfig,{},defaultParameters);

tableOption.value = [
  { label: "项目名称", prop: "projectName", minWidth: 100 },
  { label: "任务名称", prop: "taskName", minWidth: 100 },
  { label: "任务编号", prop: "taskCode", minWidth: 100 },
  {
    label: "任务状态", prop: "status", formatter: (val, row) => {
      return ['进行中', '完成'][val] || '未完成';
    },
    minWidth: 100
  },
  { label: "任务量", prop: "taskNum", minWidth: 100 },
  {
    label: "计划时间", prop: "planStartTime", formatter: (val, row) => {
      return row.planStartTime + '-' + row.planEndTime;
    },
    minWidth: 130
  },
  { label: "实际结束时间", prop: "realEndTime", minWidth: 130 },
  {
    label: "任务类型", prop: "taskType", formatter: (val, row) => {
      return ['', '招标任务', '投资任务', '租赁任务'][val] || '-';
    },
    minWidth: 100
  },
  { label: "责任部门", prop: "responsibleDepartmentName", minWidth: 100 },
  { label: "责任人", prop: "responsibleUserName", minWidth: 100 },
];

/**
 * 获取项目实施阶段配置
 */
const getStage = (param,callback) => {
    reserveInvestmentProjectLibraryApi.getStage(param.projectId,param.projectTypeId).then(res=>{
      if(res.code == 200){
          if(callback)callback();
          dataSource.value = res.data.stages;
      }
    });
}

/**
 * 项目实施任务列表
 * @param projectId
 */
const getProjectTaskList = (projectId) => {
    investmentProjects.getProjectTaskList({pageNum:1,pageSize:10,param:{projectId:projectId}}).then(res=>{

    });
}

const defaultProps = {
    children: 'children',
    label: 'stageName',
};


/**
 * 返回
 */
const goBack = () => {
    // router.push({path:`/investmentProjectManagement/investmentProjects/investmentProjectInformation/investmentProjectsList`});
    router.go(-1);
}

/**
 * 获取数据
 */
const _init = (callback,projectId,projectTypeId) => {
    getStage({
        projectId:projectId || getProjectId,
        projectTypeId:projectTypeId || getProjectTypeId
    },callback);
    getProjectTaskList(projectId || getProjectId);
    getData({pageNum:1,pageSize:10,param:{projectId:projectId || getProjectId}});
}

defineExpose({
    _init,
});
</script>

<style lang="scss" scoped>
.title{
  font-size: 16px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  color: #7D7D9A;
}
.node-title{
  font-size: 14px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 600;
  color: #1A1A1A;
}
.node-sub-title{
  font-size: 14px;
  font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  font-weight: 400;
  color: #666666;
}
</style>
